@function toRem($px){
	$rem:41.4px;
	@return $px/$rem + rem;
}

body{
	margin: 0;
	padding: 0;
	
	p{
		margin: 0;
	}
	ul{
		list-style: none;
		padding: 0;
	}
}

/* 头部搜索栏 */
.div_top{
	width: 100%;
	background: linear-gradient(to bottom , #00aaff , #0086ff); /* 对角线的线性渐变 */
	padding-top: toRem(20px);
	padding-bottom: toRem(10px);
	text-align: left;
	letter-spacing: toRem(1px);
	p{
		font-size: toRem(20px);
		color: white;
		font-weight: bold;
		padding-left: toRem(20px);
	}
	
}

.div_input{
		width: 100%;
		background: #0086ff;
		padding-top: toRem(10px);
		padding-bottom: toRem(10px);
		
		div{
			text-align: center;
			line-height: 0;
			margin: auto;
			width: 88%;
			background: white;
			height: toRem(42px);
			padding-top: toRem(5px);
			color: #999;
			i{font-size: toRem(20px);}
			input{
				width: 55%;
				height: 80%;
				color: #999;
				border: none;
				letter-spacing: toRem(1px);
			}
		}
	}
	.input_fixed{
		z-index: 100;
		position: fixed;
		top: 0;
	}


/* 分类栏 */
.div_class{
	padding-top: toRem(10px);
	padding-bottom: toRem(20px);
	line-height: 0;
	
	.div_class_item{
		display: inline-block;
		height: toRem(80px);
		width: toRem(78px);
		img{
			width: 70%;
			height: 70%;
		}
		span{
			font-size: toRem(14px);
			
		}
	}
}


/* 第三排 有灰色背景的 */
.div_gray{
	font-size: toRem(15px);
	height: toRem(115px);
	color: #666;
	margin: 0 toRem(10px);
	background: linear-gradient(to bottom right, #f5f5f5 , #fafafa); /* 对角线的线性渐变 */
	padding-top: toRem(20px);
	border-radius: toRem(2px);
	
	&_text{
		float: left;
		text-align: left;
		margin-left: toRem(15px);
		p{
			font-size: toRem(19px);
			color: black;
			font-weight: bold;
			margin-bottom: toRem(5px);
		}
		a{
			font-weight: bold;
			color: #bd8260;
			line-height: toRem(40px);
		}
	}
	&_img{
		float: right;
		display: inline-block;
		margin-right: toRem(10px);
		img{
			width: toRem(170px);
			height: toRem(110px);
		}
	}
}

/* 第四排 橙黄色背景的 */
.div_orange{
	text-align: left;
	font-size: toRem(13px);
	height: toRem(35px);
	color: #644f1b;
	margin: toRem(5px) toRem(10px);
	background: linear-gradient(to bottom right, #ffefc4, #f3dda1); 
	padding-top: toRem(13px);
	border-radius: toRem(2px);
	
	img{
		margin-left: toRem(15px);
		width: toRem(22px);
		vertical-align: middle;
		margin-bottom: toRem(5px);
	}
	label{
		font-size: toRem(16px);
		color: black;
		font-weight: bold;
		margin-left: toRem(5px);
		margin-right: toRem(5px);
	}
	a{
		float: right;
		margin-right: toRem(10px);
	}
}

/* 轮播图 */
.div_lbt{
	margin: toRem(5px) toRem(10px);
	height: toRem(110px);
	position: relative;
	img{
		width: 100%;
		height: toRem(110px);
	}
	.div_lbt_item{
		z-index: 10;
		position: absolute;
		top: 75%;
		left: 78%;
		color: white;
		background:rgba(0,0,0,0.5);
		width: toRem(80px);
		font-size: toRem(13px);
		height: toRem(24px);
		line-height: toRem(24px);
		border-radius: toRem(15px);
	}
}

/* 推荐商家 */
.div_recommend{
	font-size: toRem(18px);
	padding: toRem(10px) 0;
}

/* 筛选栏 */
.div_sort{
	height: toRem(35px);
	line-height: toRem(35px);
	font-size: toRem(16px);
	color: #333;
	letter-spacing: toRem(1px);
	
	ul{
		display: inline;
		li{
			display: inline-block;
			margin-right: toRem(12px);
			margin-left: toRem(12px);
		}
	}
}
.div_sort_hidden{
	position: fixed;
	top: toRem(67px);
	background: white;
	z-index: 100;
}




/* 商品列表 */

.div_biggest{
	padding-bottom: toRem(70px);
}

.div_foods{
	width: 100%;
	height: toRem(190px);
	font-size: toRem(13px);
	padding-top: toRem(9px);
	
	
	.div_img{
		float: left;
		margin-left: toRem(10px);
		margin-top: toRem(10px);
		img{
			width: toRem(70px);
			height: toRem(70px);
			border: 1px solid #ccc;
			border-radius: toRem(2px);
		}
	}
	
	.div_text{
		width: toRem(300px);
		float: left;
		text-align: left;
		border-bottom: toRem(1px) solid #eee;
		padding-bottom: toRem(8px);
		margin-top: toRem(8px);
		padding-left: toRem(10px);
		position: relative;
		p{
			font-size: toRem(16px);
			font-weight: bold;
			margin-bottom: toRem(3px);
			position: relative;
			width: 100%;
			i{
				font-size: toRem(15px);
				position: absolute;
				left: 92%;
				top: toRem(4px);
				color: #999;
			}
		}
		table{
			color: #888;
			tr:nth-child(1) td:nth-child(1){
				i{color: #ffbe00;}	
			}
			tr:nth-child(2) td:nth-child(2){
				 padding-left: toRem(50px); 
			}
			tr td:nth-child(1){
				padding-left: 0;
			}
			td{
				padding-left: toRem(10px);
			}

		}
		
		
		.btn_small{
			font-size: toRem(11px);
			padding: toRem(2px) toRem(3px);
			background: white;
			border: none;
			margin-top: toRem(5px);
			margin-right: toRem(3px);
		}
		.btn_small_black{
			color: #999;
			border: toRem(1px) solid #eee;
		}
		.i_down{
			color: #ccc;
			position: absolute;
			left: 93%;
			top:83%;
		}
		
		.div_hidden_btn,.arrow{
			display: none;
		}
		
	}
	
	.div_sale{
		width: 100%;
		padding-top: toRem(5px);
		padding-bottom: toRem(10px);
		float: left;
		text-align: left;
		position: relative;
		border-bottom: toRem(1px) solid #eee;
		margin-bottom: toRem(10px);
		
		a{
			position: absolute;
			top: 10%;
			left: 80%;
			color: #999;
			cursor: pointer;
		}
		.arrow{display: none;}
		.hiddenBtn{display: none;}
		
		label{
			padding-left: toRem(1px);
			padding-right: toRem(2px);
			color: white;
			border-radius: toRem(2px);
			display: inline-block;
			margin: toRem(3px);
			margin-left: toRem(80px);
		}
		.label_red{background: #f07373;}
		.label_orange{background: #f1884f;}
		.label_green{background: #70bc46;}
		.label_black{background: #999999;}
		.label_blue{background: #3cc791;}		
	}
}

/* 底部菜单 */
.div_bottom{
	margin: auto;
	width: 100%;
	position: fixed;
	bottom:0;
	height: toRem(55px);
	padding-bottom: toRem(10px);
	background: white;
	font-size: toRem(14px);
	color: #999;
	border-top:toRem(3px) solid #eee;
	
	ul{
		li{
			display: inline-block;
			padding-left: toRem(35px);
			padding-right: toRem(35px);
			cursor: pointer;
			i{font-size: toRem(25px);}
		}
		
		.li_chicked{
			i{ color: #008BFF;}
			span{font-size: toRem(13px);
			 color: #008BFF;}
		}
	}
}